<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<view class="back-arrow"></view>
				</view>
				<view class="nav-title">附近门店</view>
				<view class="nav-right">
					<view class="nav-icon-dot"></view>
					<view class="nav-icon-line"></view>
					<view class="nav-icon-circle"></view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<input class="search-input" placeholder="输入需要搜索的内容" placeholder-style="color: #999;" 
					v-model="searchKeyword" @confirm="handleSearch" />
				<image class="search-icon" src="/static/image/carmaintenance/搜索@3x.png" mode="aspectFit" @click="handleSearch"></image>
			</view>

			<!-- 历史记录 -->
			<view class="history-section" v-if="historyRecords.length > 0">
				<text class="history-label">历史记录:</text>
				<view class="history-tags">
					<view class="history-tag" v-for="(record, index) in historyRecords" :key="index" @click="searchByHistory(record)">
						{{ record }}
					</view>
				</view>
			</view>

			<!-- 门店列表 -->
			<scroll-view class="store-list" scroll-y>
				<view class="store-card" v-for="(store, index) in storeList" :key="index" @click="goToStoreDetail(store)">
					<!-- 门店名称和距离 -->
					<view class="store-card-header">
						<text class="store-card-name">{{ store.name }}</text>
						<text class="store-card-distance">{{ store.distance }}</text>
					</view>

					<!-- 评分和销量 -->
					<view class="store-card-rating">
						<view class="store-stars">
							<image v-for="(star, idx) in 5" :key="idx" 
								:src="idx < store.rating ? '/static/image/carmaintenance/五星 拷贝@3x.png' : '/static/image/carmaintenance/五星 拷贝.png'"
								class="star-icon-small"></image>
						</view>
						<text class="store-rating-text">{{ store.rating }}分</text>
						<text class="store-sales">销量: {{ store.sales }}</text>
					</view>

					<!-- 门店信息 -->
					<view class="store-card-content">
						<image class="store-card-image" :src="store.image" mode="aspectFill"></image>
						<view class="store-card-info">
							<view class="store-card-row">
								<text class="store-card-label">营业时间:</text>
								<text class="store-card-value">{{ store.businessTime }}</text>
							</view>
							<view class="store-card-row">
								<text class="store-card-address">{{ store.address }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部提示 -->
				<view class="list-footer">
					<text class="footer-text">暂无更多—————</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 搜索关键词
	const searchKeyword = ref('');

	// 历史记录
	const historyRecords = ref([
		'飞飞汽车美容店',
		'飞飞汽修美容店',
		'汽车美容店',
		'汽修美容店'
	]);

	// 门店列表
	const storeList = ref([{
			name: '车百事汽车生活馆',
			rating: 4,
			sales: 556,
			distance: '556m',
			businessTime: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/image/图层 1@2x.png',
			phone: '18642589456'
		},
		{
			name: '车百事汽车生活馆',
			rating: 4,
			sales: 556,
			distance: '556m',
			businessTime: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/image/图层 1@2x.png',
			phone: '18642589456'
		},
		{
			name: '车百事汽车生活馆',
			rating: 4,
			sales: 556,
			distance: '556m',
			businessTime: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/image/图层 1@2x.png',
			phone: '18642589456'
		}
	]);

	// 搜索
	const handleSearch = () => {
		if (searchKeyword.value.trim()) {
			// 添加到历史记录（如果不存在）
			if (!historyRecords.value.includes(searchKeyword.value.trim())) {
				historyRecords.value.unshift(searchKeyword.value.trim());
				// 限制历史记录数量
				if (historyRecords.value.length > 10) {
					historyRecords.value = historyRecords.value.slice(0, 10);
				}
			}
			// 执行搜索逻辑
			uni.showToast({
				title: '搜索: ' + searchKeyword.value,
				icon: 'none'
			});
		}
	};

	// 通过历史记录搜索
	const searchByHistory = (keyword) => {
		searchKeyword.value = keyword;
		handleSearch();
	};

	// 跳转到门店详情
	const goToStoreDetail = (store) => {
		uni.navigateTo({
			url: `/pages/index/carMaintenance/storeDetail?name=${encodeURIComponent(store.name)}&address=${encodeURIComponent(store.address)}&businessTime=${encodeURIComponent(store.businessTime)}&rating=${store.rating}&sales=${store.sales}`
		});
	};

	// 返回
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + env(safe-area-inset-top));
	}

	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.back-arrow {
		width: 24rpx;
		height: 24rpx;
		border-left: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.nav-right {
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8rpx;
	}

	.nav-icon-dot {
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	.nav-icon-line {
		width: 2rpx;
		height: 24rpx;
		background: #fff;
		margin: 0 4rpx;
	}

	.nav-icon-circle {
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: relative;
	}

	.nav-icon-circle::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	/* 内容区域 */
	.content {
		flex: 1;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/* 搜索栏 */
	.search-bar {
		width: 100%;
		height: 80rpx;
		background: #fff;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		height: 100%;
	}

	.search-icon {
		width: 36rpx;
		height: 36rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
	}

	/* 历史记录 */
	.history-section {
		margin-bottom: 30rpx;
	}

	.history-label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: block;
	}

	.history-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.history-tag {
		padding: 12rpx 24rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
		font-size: 26rpx;
		color: #2477F4;
		border: 1rpx solid #e0e0e0;
	}

	/* 门店列表 */
	.store-list {
		flex: 1;
		height: 0;
	}

	.store-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
	}

	.store-card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.store-card-name {
		font-size: 36rpx;
		font-weight: 700;
		color: #000;
		flex: 1;
	}

	.store-card-distance {
		font-size: 28rpx;
		color: #2477F4;
		font-weight: 500;
		flex-shrink: 0;
	}

	.store-card-rating {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 20rpx;
	}

	.store-stars {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.star-icon-small {
		width: 24rpx;
		height: 24rpx;
	}

	.store-rating-text {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.store-sales {
		font-size: 26rpx;
		color: #666;
	}

	.store-card-content {
		display: flex;
		gap: 20rpx;
	}

	.store-card-image {
		width: 200rpx;
		height: 150rpx;
		border-radius: 12rpx;
		flex-shrink: 0;
	}

	.store-card-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-width: 0;
	}

	.store-card-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 12rpx;
	}

	.store-card-row:last-child {
		margin-bottom: 0;
	}

	.store-card-label {
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
		margin-right: 10rpx;
	}

	.store-card-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.store-card-address {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	/* 底部提示 */
	.list-footer {
		text-align: center;
		padding: 40rpx 0;
	}

	.footer-text {
		font-size: 24rpx;
		color: #999;
	}
</style>
